<script setup lang="ts">
import {bookmarkExportApi} from "@/api/tool";
import {StringResult} from "@/types/apiTypes";
import {showFailToast} from "vant";
import {ResultEnum} from "@/enums/requestEnum";

const bookmarkExport = (type: string) => {
  bookmarkExportApi({browser: type})
      .then((resp: StringResult) => {
        if (resp.respCode === ResultEnum.ERROR) {
          showFailToast(`【Edge书签导出】${resp.msg}`);
          return;
        }
        const a = document.createElement('a');
        a.href = resp.data;
        a.target = '_blank';
        a.download = 'websiteDirectory.html';
        a.click();
      })
      .catch(error => {
        console.error('【Edge书签导出】', error);
        showFailToast('【Edge书签导出】系统异常！');
      })
}
</script>

<template>
  <div id="tool-box" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
    <div
        class="bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md menu-item-hover">
      <div class="p-5 tool-card" @click="bookmarkExport('EDGE')">
        <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
          <svg-icon
              class="text-[25px] w-14"
              name="tool-edge"
          />
        </div>
        <h3 class="font-semibold text-lg mb-2">Edge书签导出</h3>
        <p class="text-gray-600 text-sm mb-4">Edge书签导出为导航风格的HTML网页</p>
        <!--<div class="flex items-center justify-between">-->
        <!--  <span-->
        <!--      class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">-->
        <!--                                启用-->
        <!--  </span>-->
        <!--  <button class="text-primary hover:text-primary/80 text-sm font-medium transition-colors">-->
        <!--    查看详情 <i class="fa-solid fa-arrow-right ml-1"></i>-->
        <!--  </button>-->
        <!--</div>-->
      </div>
    </div>

  </div>
</template>

<style scoped>
#tool-box {
  padding: 10px 10px var(--van-tabbar-height);
}

.tool-card {
  cursor: pointer;
}
</style>